<script setup lang="ts" name="list">
import { reactive, onMounted,onBeforeUnmount,ref } from 'vue'
import { useAppStore } from '@/store'
import { useLoadingBar,useNotification  } from 'naive-ui'
import { useRouter,onBeforeRouteLeave } from 'vue-router'
import { goto } from '@/utils/comm'
import { SearchOutline,AlbumsOutline } from '@vicons/ionicons5'
import Card from '@/layouts/card.vue'
import { _home,_mylike } from '@/api/api'
import { useRequest } from 'alova'

const notification = useNotification()
const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}
 
const list_ref = ref<any>({});
const store = useAppStore()
const loadingBar = useLoadingBar()
const router = useRouter();
const data =  reactive({
  loading: false,
  tags: [] as any[],
  list: [] as any[],
  pge:1,
  activeVar:"全部",
  cnt:25,
  type:"" as any,
  type_name:['','漫画','视频','动画'],
  key:"",
  cachePage: [] as any,
  myliketags: [] as any[],
});
 
data.type = router.currentRoute.value.query.type

if(!data.type){
  let item={
    path:"/home"
  }
  goto(item)
}

async function on_refresh(){
  data.pge=1;
  await get_tags()
  get_list()
}

const on_scroll = (event:any) =>  {
  let scrollBottom =event.target.scrollHeight -event.target.scrollTop -event.target.clientHeight;
  if (scrollBottom < 10) {
    on_more()
  }
}

const on_more = () => {
  data.pge++;
  get_list();
}

const select_tag = async (item:any) => {
  data.activeVar = item.name
  data.pge=1;
  await get_list()
  list_ref.value.scrollTo(0)
}

async function get_tags() {
  const { onSuccess }  = useRequest(_home.getTags({
    pge: 1,
    cnt: 100, 
    type: data.type,
  }))
  onSuccess((res:any) => {
    data.tags = res.data.list;
  });
}

async function get_list() {  
  data.loading = false;
  loadingBar.start()
  const { onSuccess }  = useRequest(_home.getList({
    pge: data.pge,
    cnt: data.cnt,
    type: data.type,
    key:data.key,
    tag:data.activeVar
  }))
  onSuccess((res:any) => {
    if(data.pge>1){
      data.list.push(...res.data.list);
    }else{
      data.list = res.data.list          
    }
    setTimeout(() => {
      loadingBar.finish()
    }, 200) 
  });

}

async function get_myliketags() {
  const { onSuccess }  = useRequest(_mylike.mylike_tags({
    pge: 1,
    cnt: 100, 
  }))
  onSuccess((res:any) => {
    data.myliketags = res.data.list;
  });
}

const on_search = () => {
  if(!data.key){
    msg('请输入关键词后搜索')
    return   
  }
  on_refresh()
}

const keydown = (e:any) => {
  if (e.keyCode == 13) {
    on_search()
  }
}


onBeforeRouteLeave((to, from, next) => {
  if (to.name === 'detail'&&from==from) {
    data.cachePage.list = ['list']  
  } else {
    data.cachePage.list = []
  } 
  store.setcachePage(data.cachePage)
  next()
})

onMounted(() => {
  console.log("刷新了");
  window.addEventListener("keydown", keydown)
  on_refresh()
  get_myliketags()
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', keydown)
})
 
</script>

<template>
  
  <div class="page_list  page_up" id="list"  :style="store.thems?.menu_left?'height:calc(100vh - 150px);':''">
    <n-spin :show="data.loading">
    
      <div class="title">
        <div>
          <n-tag round :bordered="false" size="large">{{data.type_name[data.type]}}/推荐列表
          <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon><AlbumsOutline /></n-icon></n-avatar></template>
        </n-tag>
        </div>
        <div class="search">
          <n-input-group style="justify-content: end;">
            <n-input :style="{ width: '60%' }" v-model:value="data.key" placeholder="请输入关键词" size="small" clearable />
            <n-button type="primary"  size="small" @click="on_search">
              <template #icon>
                  <n-icon><SearchOutline /></n-icon>
                </template>
              </n-button>
          </n-input-group>
        </div>
      </div>
      <div style="padding:0 10px;">
        <n-tabs type="segment" :value="data.activeVar"  justify-content="space-evenly" size="small" :animated="true">
            <n-tab  :style="item.name==data.activeVar?'background:'+store.thems?.primary+';color:#fff':''" :name="item.name" :tab="item.name" v-for="item in data.tags" @click="select_tag(item)">{{item.name}}</n-tab>
        </n-tabs>
      </div>
      <n-scrollbar  ref="list_ref" style="max-height: calc(100vh - 140px);padding: 10px;" :style="store.thems?.menu_left?'max-height:calc(100vh - 195px);':''" :on-scroll="on_scroll" >
      <!-- <n-back-top :bottom="20" :right="20" :visibility-height="300" :min-width="10"/> -->
      <n-grid :cols="data.type==1?'5 200:2 600:4 800:5':'5 200:2 600:4 800:5'" :x-gap="10" :y-gap="10">
          <n-grid-item v-for="item in data.list">
            <Card :item="item" :key="item.id" :myliketags="(data.myliketags as any)" ref="cardref"/>
          </n-grid-item> 
      </n-grid>
    </n-scrollbar>
    </n-spin>
  </div>
</template>

<style lang="scss" scoped>
.page_list{
  height: calc(100vh - 52px);
  .title{
    display: flex;
    justify-content: space-between;
    padding:5px 10px 10px 10px;
    font-size: 18px;
  }
  .card_new{
    text-align: center;
  }
  .cover{
    transition: transform 0.2s;
    &:hover{
      transform: scale(1.1,1.1); 
    }
  }
}
.light-mode { 
  :deep(.n-tag) {
      background-color: var(--light-hover-deep) !important;
    }
}
</style>